import { useCallback, useEffect, useRef, useState } from 'react'
import { Typography } from 'antd'
import { TextWidget } from '@inbiz/react';
import { InbizIcon } from '@inbiz/utils';
import { useSearchUIState } from '../../../../store/hooks/useSearchUIState';
import { useSearchUIDispatch } from '../../../../store/hooks/useSearchUIDispatch';
import { useSearchPropsState } from '../../../../store/hooks/useSearchPropsState';
import { useJumpResult } from '../../../../store/hooks/useJumpResult';
import { useFetchHistoryData, useDeleteHistory, HistoryDeleteTypeEnum } from './resultHooks'
const HistoryList = (props: { hoverIndex?: number, smallPanelViewInputClassName: string | undefined, indexRange: boolean, }) => {
  const { smallPanelViewInputClassName, indexRange } = props
  const { keyword = '', } = useSearchUIState();
  const historyRef = useRef()
  const [historyItemWidth, $historyItemWidth] = useState(520)
  const fetchHistoryAction = useFetchHistoryData();
  const updateUIState = useSearchUIDispatch();
  const { historyData, fetchHistoryData, setHistoryData } = fetchHistoryAction;

  const onHistoryDelete = useDeleteHistory(fetchHistoryData, setHistoryData, historyData);
  const setKeyword = useCallback(
    (nextKeyword) => {
      updateUIState({
        keyword: nextKeyword,
        keywords: [nextKeyword],
      });
    },
    [updateUIState],
  );
  useEffect(() => {
    fetchHistoryData();
  }, []);
  useEffect(() => {
    if (historyRef.current) {
      $historyItemWidth(historyRef.current.clientWidth - 80)
    }
  })
  const onJumpResult = useJumpResult(setKeyword);

  return historyData?.length > 0 && !keyword ? (
    <>
      <div className='searchHistoryTop'>
        <p style={{ color: '#aaa' }}><TextWidget>SearchEngine.historySearch</TextWidget></p>
        <div
          className="clearBox"
          onClick={() => {
            onHistoryDelete(HistoryDeleteTypeEnum.ALL);
          }}
        >
          {/* <InbizIcon type="icon-ic-tree-huishouzhan" /> */}
          <span className="history-label">
            <TextWidget>SearchEngine.clear</TextWidget>
          </span>
        </div>
      </div>
      <ul className="history-search-result" ref={historyRef}>
        {historyData.map((item, index) => {
          return (
            <li
              onClick={() => {
                updateUIState({
                  showSearchResultPanel: false,
                });
                onJumpResult(item, [item]);
              }}
              className={`historyitem ${props.hoverIndex !== undefined ? (index == props.hoverIndex ? 'historyitemhover' : '') : ''
                }`}
              key={`${item}-${index}`}
            >
              <div>
                <InbizIcon type="icon-inbiz_basic-clock" style={{ marginRight: 13 }} />
                <span className="history-label">
                  <Typography.Text ellipsis style={{ width: historyItemWidth, fontSize: 14 }} title={item}>
                    {item}
                  </Typography.Text>
                </span>
              </div>
              <InbizIcon
                className='removeHistoryItem'
                type="icon-guanbi-yeqian"
                style={{ color: '#999', fontSize: 20 }}
                onClick={(e) => {
                  e.stopPropagation()
                  onHistoryDelete(HistoryDeleteTypeEnum.SINGLE, item)
                }}
              />
            </li>
          );
        })}
        {/* {!smallPanelViewInputClassName && <li className="item clear">
          <div
            className="clearBox"
            onClick={() => {
              onHistoryDelete(HistoryDeleteTypeEnum.ALL);
            }}
          >
            <InbizIcon type="icon-ic-tree-huishouzhan" />
            <span className="history-label">
              <TextWidget>SearchEngine.clearHistory</TextWidget>
            </span>
          </div>
        </li>} */}
      </ul>
    </>
  ) : null;
};
export default HistoryList